<template>
	<view class="index">
		<!-- <navBar title="融易装"></navBar> -->
		<nav-bars backState="2000" bgColor="#fff" fontColor="#000" title="家居商城"></nav-bars>
		<!-- <view class="i_header" slot="center"></view> -->
		<!-- banner -->
		
		<view class="i_banner">
			<!-- 搜索框 -->
			<view class="isearch">
				<view class="i_bSearch">
					<view class="i_bIcon"><view class="iconfont icon-search"></view></view>
					<view class="i_bClear" v-if="searchVal.length" @tap="searchVal = ''"><view class="iconfont icon-close"></view></view>
					<view class="i_bInput">
						<input type="text" confirm-type="search" v-model="searchVal" @confirm="searchData" placeholder="搜索您感兴趣的商品吧" placeholder-class="col-fff"/>
					</view>
				</view>
			</view>
			<view class="swiper-box">
				<swiper :autoplay="true" :interval="2000" :duration="500" :circular="true" @change="threeBannerChange">
					<swiper-item v-for="(item,index) in bannerlist" :key="index" @click="navTo(item)">
						<u-image width="100%" height="100%" :src="item.img"></u-image>
						<!-- <image class="swiper-image" :src="item.img"  mode="widthFix"> -->
					</swiper-item>
				</swiper>
				<view class="i_tDots">
					<view v-for="(item, index) in bannerlist" :key="index"
						:class="['i_tDot', index == threeIndex ? 'active' : '']">
						<view class="i_tIcon"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="yopcom">
			<view class="i_com"><text class="k1">严选优质商家</text></view>
			<view class="i_com"><text class="k2">线下实体店铺</text></view>
			<view class="i_com"><text class="k3">送货上门安装</text></view>
		</view> -->
		<!-- icon列表 -->
		<view class="IconList">
			<swiper class="swiper" :autoplay="false" @change="SwiperChange">
				<swiper-item v-for="(item,index) in classList" :key="index">
					<u-grid :col="5" :border="false">
						<u-grid-item :custom-style="{'padding':'0',}" v-for="(items,indexs) in item" :key="indexs"
							@click="toPagelist(items.cate_id)" style="padding: 0!important;">
							<view class="IconItem">
								<view class="IconFor">
									<view class="IconImage">
										<image :src="items.cate_logo">
										</image>
									</view>
									<view class="IconTitle">{{items.cate_name}}</view>
								</view>
							</view>
						</u-grid-item>
					</u-grid>
					<!-- <view class="IconItem">
						<view class="IconFor" v-for="(items,indexs) in item" :key="indexs"
							@click="toPagelist(items.cate_id)">
							<view class="IconImage">
								<image :src="items.cate_logo">
								</image>
							</view>
							<view class="IconTitle">{{items.cate_name}}</view>
						</view>
					</view> -->
					<view></view>
				</swiper-item>
			</swiper>
			<view class="indicator-dots">
				<view class="indicator-dots-item" :class="[current == index ? 'indicator-dots-active' : '']"
					v-for="(item,index) in classList" :key="index">
				</view>
			</view>
		</view>
		<!-- 优惠券 -->
		<view class="coupon">
			<view class="commonNav">
				<view class="commonTitle">领券中心</view>
				<view class="commonMore" @click="GoCouponList">
					<text>更多</text>
					<text class="iconfont icon-more" style="margin-top: -2rpx;"></text>
				</view>
			</view>

			<view class="coupon_Column">
				<scroll-view class="coupon_Column_List" scroll-x>
					<view class="scoll-wrapper">
						<view class="floor-item" v-for="(item, index) in CouponList" :key="index">
							<view class="Column_view">
								<view class="Column_Item">
									<!-- :class="[item.is_redeem == 0?'Column_Item':'Column_ItemA']" -->
									<!-- <view class="ColumnPirce"><text>¥</text>{{item.discount_money*1}}</view> -->

									<view class="ColumnPirce" v-if="item.discount_type !== 3">
										<text class="man">{{item.discount_type == 1 ?'¥':''}}</text>
										{{item.discount_type == 1?item.discount_money:item.discount_money}}
										<text class="zhe">{{item.discount_type == 1?'':'折'}}</text>
									</view>
									<view class="ColumnPirce" v-if="item.discount_type == 3">
										<text class="man">{{item.discount_type == 3 ?'¥':''}}</text>
										{{item.discount_type == 3?item.discount_money/10:item.discount_money/10}}
									</view>
									<view class="ColumnCondition">
										{{item.condition*1 == 0?'无门槛':'满'+item.condition*1+'可用'}}
									</view>
								</view>
								<view class="ColumnMessage">
									<view class="ColumnTitle ellipsisText" style="white-space:pre-line;">{{item.name}}
									</view>
									<view>
										<!-- :style="{background:item.is_redeem == 0? '#EC6060':'#EC6060'}" -->
										<view class="ColumnBtn" v-if="item.is_redeem == 0" style="background: #EC6060;"
											@click="GetDiscounts(item.id,index,item.is_redeem)">
											立即领取
										</view>
										<view class="ColumnDashed"></view>
										<view class="ColumnTime">
											<!-- 有效期：{{item.time_type == 1?item.date +'天':$utils.getFormatDate(item.start_time*1000,"yyyy.MM.dd") +'-'+$utils.getFormatDate(item.end_time*1000,"yyyy.MM.dd")}} -->
											<view v-if="item.time_type == 1">
												{{item.date == 0?'有效期：不限制':  '有效期：'+item.date+'天'}}
											</view>
											<view v-else>
												{{$utils.getFormatDate(item.start_time*1000,"yyyy.MM.dd") +'-'+$utils.getFormatDate(item.end_time*1000,"yyyy.MM.dd")}}
											</view>
										</view>
									</view>
									<view class="ColumnRedeem" v-if="item.is_redeem == 1">
										<image src="https://cos.ryz1620.com/liankun/static/coupon.png">
										</image>
									</view>
								</view>
								<!-- <view class="buy_tips" >2021.06.04-2021.08.30
									<image src="https://cos.ryz1620.com/liankun/static/mailColum.png" ></image>
									<view class="buy_text" >
										购
									</view>
								</view> -->
							</view>
						</view>

						<!-- <view class="floor-item">
							<view class="NullData"></view>
						</view> -->
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 精选品牌 -->
		<view class="i_brand">
			<view class="TitleView">
				<view class="i_rTitle">精选品牌</view>
				<view class="i_tOper" @tap="toPage('brand')">
					<view class="i_toIcon">
						<text>更多</text>
						<text class="iconfont icon-more" style="margin-top: -2rpx;"></text>
					</view>
				</view>
			</view>
			<view class="i_bList">
				<view class="i_bItem" v-for="item in brandList" :key="item.store_id"
					@tap="toPage('store', { storeId: item.store_id })">
					<view class="i_topimg"
						:style="{
						background: 'url(https://cos.ryz1620.com/liankun/static/newHome/home2.png)','background-repeat': 'no-repeat','background-size': '100% 100%',}">

					</view>
					<view class="i_logo">
						<image :src="item.store_logo"></image>
					</view>
					<view class="i_bottom" style="height: 90rpx;">
						<view class="i_title ellipsisText1" style="width: 194rpx;">{{item.store_name}}</view>
						<view class="i_des">
							<text v-for="(itm, idx) in item.cate_lst" :key="idx" v-if="idx<3">{{itm.cate_name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 主页详情 -->
		<view class="i_container">
			<!-- 推荐商品 -->
			<view class="i_recommend">
				<view class="i_rTitle">推荐商品</view>
				<view class="i_rList">
					<view class="list">
						<view class="side-line" v-for="(item,index) in 2" :key="index">
							<navigator class="card"
								:url="`/pages_mall/pages/mall/goods_details/goods_details?id=${items.product_id}`"
								v-if="indexs%2==index" v-for="(items,indexs) in goodsList" :key="indexs">
								<image lazyLoad="true" mode="widthFix" :src="items.main_imgurl"></image>
								<view class="card-right">
									<view class="name ell-2">{{items.product_title}}</view>
									<view class="price">¥{{items.price}}</view>
									<image class="cart" src="@/static/common/icon_fixed3.png"></image>
								</view>
							</navigator>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import URL from '@/config/url.js'
	import navBar from '@/components/navBar/navBar.vue'
	import service_mall from '@/service/mall.js'
	import $HTTPS from '@/service/DIY.js';
	export default {
		components: {
			navBar
		},

		data() {
			return {
				// 搜索框
				searchVal: '',
				// 家居分类
				classList: [],
				current: 0,

				// 精选品牌
				brandList: [],
				// 推荐商品
				goodsPage: 1,
				// 免费使用
				freeList: [{
						id: 1,
						text: '【星钻】NRL取暖器'
					},
					{
						id: 2,
						text: '【星钻】NRL取暖器【星钻】NRL取暖器【星钻】NRL取暖器'
					},
					{
						id: 3,
						text: '【星钻】NRL取暖器【星钻】NRL取暖器【星钻】NRL取暖器'
					},
					{
						id: 4,
						text: '【星钻】NRL取暖器'
					},
				],
				goodsList: [],
				bannerlist: [],
				iconList: [],
				CouponList: [], //优惠券
				threeIndex:0,
			}
		},
		onShow() {
			this.getGoods()
			this.getData()
			this.getBanner()
			this.GetCouponData()
			this.getDatashop()
		},
		onLoad(data) {
			this.$utils.getUrl()
			console.log(data);
		},
		onReachBottom() {
			this.goodsPage++
			this.getGoods()
		},

		methods: {
			SwiperChange(e) {
				this.current = e.detail.current;
			},
			// 获取优惠券
			GetCouponData() {
				service_mall.condition()
					.then(res => {
						console.log(res,'优惠券')
						if (res.code == 1) {
							// console.log(res.data.cut);
							var cutList = res.data.cut
							// this.CouponList = cutList
							// var cutList = res.data
							cutList.forEach((item, index) => {
								item.select = false
								item.condition = item.condition * 1
								item.discount_money = item.discount_type == 1 ? item.discount_money * 1 : item
									.discount_money * 10
							})
							this.CouponList = cutList
						}
					})
			},
			threeBannerChange(e) {
				this.threeIndex = e.detail.current;
			},
			// 优惠券领取
			GetDiscounts(row, index, isclick) {
				// console.log(row,'id');
				// console.log(index,'下标');
				// console.log(isclick,'是否可以点击');
				// console.log();
				var that = this
				if (isclick == 0) {
					uni.showLoading()
					service_mall.discounts({
							coupon_id: row
						})
						.then(res => {
							if (res.code == 1) {
								uni.hideLoading()
								uni.showToast({
									title: '领取成功',
									icon: 'success',
									duration: 1000
								})
								setTimeout(function() {
									console.log(res);
									that.CouponList[index].is_redeem = 1
								}, 1000)

							}else{
								uni.hideLoading()
								this.$utils.showErr({
									title: res.msg
								})
							}
						})
				}

			},
			// 获取数据
			getData() {
				service_mall.index_getData()
					.then(res => {
						console.log(res,'数据数据')
						if (res.code == 1) {
							let data = res.data
							let classList = data.cate // 家居分类
							// let brandList = data.topStore // 精选品牌
							// 处理数据
							// for (let i = 0; i < classList.length; i++) {
							// 	let cateName = classList[i].cate_name
							// 	if (cateName && cateName.length == 2) {
							// 		classList[i].cate_name = cateName[0] + ' ' + cateName[1]
							// 	}
							// }
							var result = [];
							for (var i = 0; i < classList.length; i += 10) {
								result.push(classList.slice(i, i + 10));
							}
							// console.log(result);
							this.classList = result
							// this.brandList = brandList
						} else {
							this.$utils.showErr({
								title: res.msg
							})
						}
					})
					.catch(err => {
						this.$utils.showErr()
					})
			},
			// 推荐品牌
			getDatashop() {
				service_mall.index_getshop()
					.then(res => {
						if (res.code == 1) {
							let data = res.data
							let brandList = data // 精选品牌
							this.brandList = brandList
						} else {
							this.$utils.showErr({
								title: res.msg
							})
						}
					})
					.catch(err => {
						this.$utils.showErr()
					})
			},

			// 获取推荐商品数据
			getGoods() {
				let goodsPage = this.goodsPage
				service_mall.index_getProduct({
						page: goodsPage
					})
					.then(res => {
						if (res.code == 1) {
							let data = res.data.data
							for (var i = 0; i < data.length; i++) {
								this.goodsList.push(data[i]); // 加载的数据追加在上一页后面
							}
						}
					})
			},
			// 获取banner
			getBanner() {
				service_mall.index_getBanner({
					type:34
					}).then(res => {
						if (res.code == 1) {
							this.bannerlist = res.data
						}
					})

			},
			navTo(item){
				console.log(item)
				uni.navigateTo({
					url:item.link
				})
			},
			GoCouponList() {
				uni.navigateTo({
					url: '/pages_now/pages/coupon/list'
				})
			},
			searchData() {
				uni.navigateTo({
					url: '/pages_mall/pages/mall/goods/list?keyword=' + this.searchVal
				})
			},
			toPagelist(id) {
				if (id) {
					uni.navigateTo({
						url: '/pages_mall/pages/mall/goods/classify?cateId=' + id
					})
				} else {
					uni.navigateTo({
						url: '/pages_mall/pages/mall/goods/classify'
					})
				}
			},
			// 跳转页面
			toPage(page, {
				goodsId,
				storeId
			} = {}) {
				// 跳转到 品牌分类
				if (page === 'brand') uni.navigateTo({
					url: '/pages_mall/pages/mall/brandList/brandList'
				})
				// 跳转到 商家详情
				else if (page === 'store') {
					var that = this;
					$HTTPS
						.GetDiyData({
							partner_id: storeId
						})
						.then(res => {
							if (res.code == 1) {
								let data = res.data;
								console.log(data);
								if (data.content) {
									uni.navigateTo({ url: '/pages_mall/pages/Decoration/view/index?storeId=' + storeId });
								} else {
									uni.navigateTo({ url: '/pages_mall/pages/mall/store/storeNew?storeId=' + storeId });
								}
							} else {
								that.$utils.showErr({
									title: res.msg
								});
							}
						})
						.catch(err => {
							that.$utils.showErr({
								title: err
							});
						});
				}
				// 跳转到 商品分类
				else if (page === 'classify') uni.navigateTo({
					url: '/pages_mall/pages/mall/goods/classify'
				})
				// 跳转到团购
				else if (page === 'groupBuy') uni.navigateTo({
					url: '/pages_mall/pages/mall/goods_details/goods_details?bulkSpell=true&shopPrice=0'
				})
				// 跳转到限时购
				else if (page === 'limitBuy') uni.navigateTo({
					url: '/pages_mall/pages/mall/goods_details/goods_details?seconds=true&shopPrice=0'
				})
				// 跳转到商品页
				else if (page === 'goodsDetail') uni.navigateTo({
					url: `/pages_mall/pages/mall/goods_details/goods_details?id=${goodsId}`
				})
			},
		},

	}
</script>

<style lang="scss">
	page {
		background: #FCFCFC;
	}
	.ellipsisText1 {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.ellipsisText {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.commonNav {
		padding: 12rpx 32rpx 0rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.commonTitle {
			font-size: 36rpx;
			font-weight: 600;
			line-height: 48rpx;
			color: #333;
		}

		.commonMore {
			font-size: 22rpx;
			font-weight: 400;
			line-height: 20rpx;
			color: #A0A0A0;
		}
	}

	.IconList {
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx rgba(0, 0, 0, 0.06);
		opacity: 1;
		border-radius: 16rpx;
		margin: 28rpx 32rpx;
		padding: 28rpx 28rpx 28rpx 28rpx;

		.indicator-dots {
			// margin-top: 40rpx;
			// padding: 0rpx 0 28rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.IconItem {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: center;
			// justify-content: space-between;

			.IconFor {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				// width: 20%;
				margin-bottom: 20rpx;

				.IconImage {
					width: 88rpx;
					height: 88rpx;
				}

				.IconTitle {
					font-size: 22rpx;
					color: #333333;
					margin-top: 12rpx;
					white-space: pre;
				}
			}
		}

		.swiper {
			height: 320rpx;
		}

		.indicator-dots-item {
			background: #333333;
			opacity: 0.5;
			height: 10rpx;
			width: 10rpx;
			border-radius: 50%;
			margin: 0 10rpx;
		}

		.indicator-dots-active {
			background: #333333;
			opacity: 1;
		}
	}

	// 优惠券
	.coupon {
		background: #fff;
		margin: 0rpx 32rpx;
		border-radius: 15rpx;
		box-shadow: 0px 0rpx 16rpx rgba(0, 0, 0, 0.06);
		overflow: hidden;

		.coupon_Column_List {
			white-space: nowrap;
			padding: 0rpx 20rpx 10rpx 32rpx;
			// padding-right: 18upx;
			// border-radius: 6upx;
			// margin-top:-140upx;
			// margin-left: 30upx;
			background: #fff;
			// box-shadow: 1px 1px 5px rgba(0,0,0,.2);
			position: relative;
			z-index: 1;

			.scoll-wrapper {
				display: flex;
				align-items: flex-start;
				// margin-bottom: 30rpx;
				background: #fff;
				padding-top: 12rpx;
				padding-bottom: 10rpx;

				// height: 200rpx;
				.floor-item {
					padding-right: 20rpx;

					// .NullData {
					// 	width: 20rpx;
					// 	height: 280rpx;
					// }


					.Column_view {
						display: flex;
						position: relative;
						width: 464rpx;
						height: 170rpx;
						background: #fff;

						// box-shadow: 0rpx 0rpx 16rpx rgba(0, 0, 0, 0.06);
						// margin-right: 24rpx;
						// border-radius: 10rpx;
						// overflow: hidden;
						.ColumnPirce {
							font-weight: 600;
							font-size: 50rpx;

							text {
								font-size: 32rpx;
								font-weight: 400;
								padding-right: 10rpx;
							}
						}

						.ColumnCondition {
							font-size: 20rpx;
						}

						.ColumnMessage {
							flex: 1;
							padding: 10rpx 10rpx 10rpx 18rpx;
							font-size: 22rpx;
							color: #333333;
							display: flex;
							position: relative;
							flex-direction: column;
							overflow: hidden;
							justify-content: space-between;
							box-shadow: 0rpx 0rpx 16rpx rgba(0, 0, 0, 0.06);
							border-radius: 0rpx 10rpx 10rpx 0rpx;

							.ColumnRedeem {
								width: 113rpx;
								height: 113rpx;
								border-radius: 100%;
								overflow: hidden;
								position: absolute;
								top: -21rpx;
								right: -21rpx;
								opacity: 0.5;
							}

						}

						.ColumnBtn {
							border-radius: 30rpx;
							width: max-content;
							color: #fff;
							padding: 4rpx 12rpx;
							font-size: 20rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-bottom: 10rpx;
						}

						.ColumnDashed {
							border-bottom: 1px dashed #707070;
							opacity: 0.23;
						}

						.ColumnTime {
							font-size: 16rpx;
							padding-top: 10rpx;
						}

						.buy_tips {
							width: 40rpx;
							height: 44rpx;
							position: absolute;
							top: 0;
							right: 14rpx;

							image {
								position: relative;
							}

							.buy_text {
								position: absolute;
								top: 40%;
								left: 50%;
								transform: translate(-40%, -50%);
								font-size: 20rpx;
								font-weight: 600;
								color: #fff;
							}
						}

					}

					.Column_Item {
						width: 180rpx;
						height: 170rpx;
						color: #fff;
						position: relative;
						border-radius: 10rpx 0rpx 0rpx 10rpx;
						background-color: #EC6060;
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;
					}

					.Column_Item::after {
						content: '';
						position: absolute;
						height: 100%;
						width: 5rpx;
						top: 0;
						right: -5rpx;
						background-image: linear-gradient(to bottom, #EC6060 5rpx, transparent 5rpx, transparent),
							radial-gradient(10rpx circle at 5rpx 10rpx, transparent 5rpx, #EC6060 5rpx);
						background-size: 5rpx 15rpx;
					}

					.Column_Item::before {
						position: absolute;
						content: '';
						display: block;
						width: 30rpx;
						height: 30rpx;
						background: #fff;
						top: 50%;
						left: -18rpx;
						transform: translate(0%, -50%);
						border-radius: 100%;
					}

					.Column_ItemA {
						width: 180rpx;
						height: 170rpx;
						color: #fff;
						position: relative;
						border-radius: 10rpx 0rpx 0rpx 10rpx;
						background-color: #ddd;
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;
					}

					.Column_ItemA::after {
						content: '';
						position: absolute;
						height: 100%;
						width: 5rpx;
						top: 0;
						right: -5rpx;
						background-image: linear-gradient(to bottom, #ddd 5rpx, transparent 5rpx, transparent),
							radial-gradient(10rpx circle at 5rpx 10rpx, transparent 5rpx, #ddd 5rpx);
						background-size: 5rpx 15rpx;
					}

					.Column_ItemA::before {
						position: absolute;
						content: '';
						display: block;
						width: 30rpx;
						height: 30rpx;
						background: #fff;
						top: 50%;
						left: -18rpx;
						transform: translate(0%, -50%);
						border-radius: 100%;
					}

					.Column_ItemB {
						width: 180rpx;
						height: 170rpx;
						color: #fff;
						border-radius: 10rpx 0rpx 0rpx 10rpx;
						position: relative;
						background-color: #E0C378;
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;
					}

					.Column_ItemB::after {
						content: '';
						position: absolute;
						height: 100%;
						width: 5rpx;
						top: 0;
						right: -5rpx;
						background-image: linear-gradient(to bottom, #E0C378 5rpx, transparent 5rpx, transparent),
							radial-gradient(10rpx circle at 5rpx 10rpx, transparent 5rpx, #E0C378 5rpx);
						background-size: 5rpx 15rpx;
					}

					.Column_ItemB::before {
						position: absolute;
						content: '';
						display: block;
						width: 30rpx;
						height: 30rpx;
						background: #fff;
						top: 50%;
						left: -18rpx;
						transform: translate(0%, -50%);
						border-radius: 100%;
					}


				}
			}
		}

	}

	// 品牌家具
	.i_brand {

		margin: 8rpx 0;
		background: #fff;
		margin-top: 6rpx;

		.TitleView {
			display: flex;
			align-items: center;
			padding: 24rpx 32rpx 24rpx 40rpx;
			justify-content: space-between;
		}

		.i_tOper {
			color: #939393;

			.i_toIcon {
				color: #939393;
				font-size: 24rpx;
				display: flex;
				align-items: center;
			}
		}

		.i_rTitle {
			font-size: 36rpx;
			font-weight: 600;
			color: #333333;
		}

		.i_bList {
			padding: 0 32rpx 32rpx 32rpx;
			overflow-x: auto;
			white-space: nowrap;
			// margin-left: 8rpx;

			.i_bItem {
				margin-right: 22rpx;
				border-radius: 8rpx;
				position: relative;
				overflow: hidden;
				display: inline-block;
				background: #fff;
				box-shadow: 0rpx 0rpx 16rpx rgba(0, 0, 0, 0.06);

				.i_topimg {
					width: 194rpx;
					height: 90rpx;
				}

				.i_logo {
					height: 100rpx;
					width: 100rpx;
					border-radius: 50%;
					overflow: hidden;
					position: absolute;
					top: 40rpx;
					left: 50%;
					transform: translate(-50%, 0%);
					box-shadow: 0rpx 0rpx 16rpx rgba(0, 0, 0, 0.06);
				}

				.i_bottom {
					margin-top: 66rpx;
					padding-bottom: 24rpx;

					.i_title {
						font-size: 24rpx;
						font-weight: 500;
						line-height: 34rpx;
						color: #333333;
						text-align: center;
						margin-bottom: 2rpx;
					}

					.i_des {
						font-size: 16rpx;
						font-weight: 400;
						line-height: 22rpx;
						color: #939393;
						text-align: center;
					}
				}
			}
		}
	}

	.index {
		.i_header {
			width: 100%;
			color: #000;
			font-size: 36rpx;
			font-weight: normal;
			padding-left: 32rpx;
		}

		// banner
		.i_banner {width: 100%;background: #fff;overflow: hidden;
		   
			// 搜索框
			.i_bSearch {width: 686rpx;height: 62rpx;margin: 10rpx auto 0;border-radius: 32rpx;background: #dedede;position: relative;
				.i_bIcon {height: 62rpx;line-height: 62rpx;color: #fff;font-size: 32rpx;padding-left: 28rpx;position: absolute;top: 0;left: 0;}
				.i_bClear {width: 66rpx;height: 62rpx;line-height: 62rpx;text-align: center;color: #fff;font-size: 32rpx;position: absolute;top: 0;right: 0;}
				.i_bInput {height: 100%;padding: 0 68rpx;
					& > input {height: 100%;color: #fff;}
				}
			}
			.isearch{
				width: 100%;
			}
			.swiper-box{
				    height: 240rpx;
				    margin: 20rpx 30rpx;
				    border-radius: 10rpx;
				    margin-bottom: 0;
				    position: relative;
				    overflow: hidden;
			}
			.i_tDots {
				width: 100%;
				position: absolute;
				bottom: 8rpx;
				left: 0;
				display: flex;
				justify-content: center;
			}
			
			.i_tDot {
				width: 60rpx;
				height: 10rpx;
			
				&.active .i_tIcon {
					background: #ffd425;
				}
			
				.i_tIcon {
					width: 40rpx;
					height: 5rpx;
					margin: auto;
					background: rgba(0, 0, 0, 0.3);
				}
			}
		}

		// 内容
		.i_container {
			// background: #f6f7fb;
			overflow: hidden;





			// 推荐商品
			.i_recommend {
				margin-top: 16rpx;
				background: #fff;

				.i_rTitle {
					height: 44rpx;
					line-height: 44rpx;
					font-size: 32rpx;
					font-weight: bold;
					padding: 24rpx 32rpx 28rpx;
					box-sizing: content-box;
				}

				.i_rList {
					// padding: 0 32rpx;

					.i_rItem {
						padding-bottom: 28rpx;

						.i_rImage {
							width: 100%;
							height: 350rpx;
							border-radius: 8rpx 8rpx 0rpx 0rpx;
							background: #f6f7fb;
							overflow: hidden;
						}

						.i_rTit {
							min-height: 34rpx;
							line-height: 34rpx;
							font-size: 24rpx;
							margin-top: 8rpx;
						}

						.i_rFee {
							height: 44rpx;
							line-height: 44rpx;
							color: #e9423e;
							font-size: 32rpx;
							font-weight: bold;
							margin-top: 8rpx;
						}
					}
				}
			}
		}
	}

	.inbeijing {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		bottom: 0;
		background: rgba(0, 0, 0, 0.25);
	}

	.yprice {
		border: 1px #E9423E solid;
		display: inline-block;
		font-size: 16rpx;
		line-height: 30rpx;
		padding-right: 10rpx;
		color: #e9423e;
		margin-top: 10rpx;
		border-radius: 3rpx;

		i {
			display: inline-block;
			background: #E9423E;
			color: #fff;
			font-weight: normal;
			font-size: 16rpx;
			line-height: 34rpx;
			float: left;
			padding: 0 10rpx;
			margin-right: 5rpx;
		}

		text {
			font-size: 22rpx;
		}
	}

	.list {
		display: flex;
		padding: 0 20rpx 40rpx;
	}

	.card {
		font-size: 30rpx;
		margin: 20rpx 10rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.card>image {
		width: 100%;
		flex-shrink: 0;
		background-color: #f6f6f6;
		border-radius: 10rpx 10rpx 0 0;
		height: 345rpx !important;
		vertical-align: middle;
		max-width: 480rpx;
	}

	.card-right {
		padding: 20rpx;
		min-width: 300rpx;
		position: relative;
	}

	.name {
		font-size: 28rpx;
		height: 70rpx;
		line-height: 35rpx;
		overflow: hidden;
	}

	.price {
		color: red;
		font-size: 32rpx;
		font-weight: 700;
		padding: 12rpx 0;
	}

	.old-price {
		color: #999;
		font-size: 24rpx;
	}

	.residue {
		font-size: 24rpx;
		color: #a80101;
	}

	.bnt-box {
		text-align: right;
		position: absolute;
		width: 170rpx;
		bottom: 20rpx;
		right: 20rpx;
	}

	.no-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx 20rpx 0 0;
		padding-top: 40rpx;
	}

	.no-title {
		padding: 30rpx 0;
	}

	.no-card>text {
		font-size: 24rpx;
		color: #999;
	}

	.no-bnt {
		padding: 10rpx 20rpx;
		margin: 20rpx;
		border: 2rpx solid #eee;
		font-size: 26rpx;
	}

	.no-card image {
		height: 160rpx;
		width: 160rpx;
		background-color: #f6f6f6;
		border-radius: 50%;
		padding: 40rpx;
	}

	.side-line {
		width: 50%;
	}

	.cart {
		position: absolute;
		right: 20rpx;
		bottom: 25rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.yopcom {
		display: flex;
		text-align: center;
		font-size: 20rpx;
		background: #fff;
		border-top: 1px #fff solid;
		line-height: 90rpx;

		.i_com {
			flex: 1;

			text {
				padding-left: 35rpx;
			}

			text.k1 {
				background: url(@/static/home/k1.png) no-repeat left center;
				background-size: 30rpx;
			}

			text.k2 {
				background: url(@/static/home/k2.png) no-repeat left center;
				background-size: 30rpx;
			}

			text.k3 {
				background: url(@/static/home/k3.png) no-repeat left center;
				background-size: 30rpx;
			}
		}
	}
</style>
